<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>echats-demo</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <header>
        <h1>数据可视化-Echarts</h1>
        <div class="showTime"></div>
        <script>
             let dt = document.querySelector('.showTime')
            function getTime(){
                let d = new Date()
                let week = "星期" + "日一二三四五六".charAt(d.getDay())
                let hours = d.getHours() < 10 ? "0" + d.getHours() :d.getHours()
                let minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes()
                let seconds = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds()
                var t = {
                    date:`${d.getFullYear()}年${d.getMonth()+1}月${d.getDate()}日`,
                    time:`${hours}:${minutes}:${seconds}`,
                    weekday: week
                }
                dt.innerHTML = "当前时间为：" + t.date + t.time + t.weekday
            }
            setInterval(getTime,1000);
        </script>
    </header>
    <div class="mainbox">
        <div class="column">
            <div class="panel bar">
                <h2>柱状图</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel line">
                <h2>折线图</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel pie">
                <h2>饼图</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
        </div>
        <div class="column">
            <div class="no">
                <div class="no-hd">
                    <ul>
                        <li>1569</li>
                        <li>3546</li>
                    </ul>
                </div>
                <div class="no-bd">
                    <ul>
                        <li>数据</li>
                        <li>人数</li>
                    </ul>
                </div>
            </div>
            <div class="map">
                <div class="chart">
                    <div id="map">
                        
                    </div>
                </div>
                <div class="map1"></div>
                <div class="map2"></div>
                <div class="map3"></div>
            </div>
        </div>
        <div class="column">
            <div class="panel bar1">
                <h2></h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel line1">
                <h2></h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel pie1">
                <h2></h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
        </div>
    </div>
    <script src="./js/flexible.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/jquery.js"></script>
    <script src="./js/index.js"></script>
</body>
<script>

</script>
</html>